<template>
	<view class="user">
		<view class="operationCenter">
			<view class="header bg-color-reds acea-row row-between-wrapper">
				<view class="picTxt acea-row row-between-wrapper">
					<view class="pictrue">
						<image :src="userInfo.avatar" />
					</view>
					<view class="text">
						<view class="acea-row row-middle">
							<view class="name line1">
								{{ userInfo.nickname.length > 5 ? userInfo.nickname.substring(0, 5) + "..." : userInfo.nickname }}（{{userInfo.areaType == 0 ? '省级代理' :userInfo.areaType == 1 ? '市级代理' : '区级代理' }}）
							</view>
						</view>
						<view class="acea-row row-middle address">
							<view class="name line1">地区：{{ userInfo.areaName }}</view>
						</view>
					</view>
				</view>

				<view class="vipNameView" v-if="userInfo.vip"
					:class="userInfo.vipId == 0 ?'ordinary' :userInfo.vipId == 1 ? 'vip' :userInfo.vipId == 2 ? 'gold' :userInfo.vipId == 3 ? 'diamonds' :userInfo.vipId == 4? 'anCrown' : 'founder'">
					<text>会员等级：{{ userInfo.vipName }}</text>
				</view>
			</view>
			<view class="wrapper">
				<view class="nav acea-row row-middle">
					<view class="item">
						<text class="num">{{ totalSum || 0 }}</text>
						<text>总收益</text>
					</view>
					<view class="item">
						<text class="num">{{ monthTotalSum || 0 }}</text>
						<text>月收益</text>
					</view>
					<view class="item">
						<picker class="num" mode="date" :fields="'month'" :value="filterBtnstartDate" :start="startDate"
							:end="endDate" @change="bindstartDate">
							<view class="uni-input">{{filterBtnstartDate}}</view>
						</picker>
						<text>日期</text>
					</view>
				</view>
			</view>
			<view class="orderDataView">
				<view class="item" v-for="(item, infoIndex) in info" :key="infoIndex"
					@click="operationCenterdistrictlevel(item.areaId,item.addTime)" v-if="userInfo.areaType == 0">
					<view class="top_no">
						地区：{{ item.areaName }}
					</view>
					<view class="content">
						<view class="item_tr">
							<view class="item_td">
								总收益：￥{{ item.currentMonthSum }}
							</view>
						</view>
						<view class="item_tr">
							<view class="item_td">
								总订单量：{{ item.currentMonthAmount }} 单
							</view>
						</view>

						<view class="time_date">
							{{ item.addTime }}
						</view>
					</view>
				</view>
				<view v-if="userInfo.areaType == 1" class="item" v-for="(item, infoIndex) in info" :key="infoIndex"
					@click="operationCenterDetail(item.areaId,item.addTime)">
					<view class="top_no">
						地区：{{ item.areaName }}
					</view>
					<view class="content">
						<view class="item_tr">
							<view class="item_td">
								总收益：￥{{ item.currentMonthSum }}
							</view>
						</view>
						<view class="item_tr">
							<view class="item_td">
								总订单量：{{ item.currentMonthAmount }} 单
							</view>
						</view>

						<view class="time_date">
							{{ item.addTime }}
						</view>
					</view>
				</view>
				<view v-if="userInfo.areaType == 2"  class="item" v-for="(item, infoIndex) in info" :key="infoIndex"
					@click="operationCenterDayDetail(item.areaId,item.addTime)">
					<view class="top_no">
						地区：{{ item.areaName }}
					</view>
					<view class="content">
						<view class="item_tr">
							<view class="item_td">
								总收益：￥{{ item.currentMonthSum }}
							</view>
						</view>
						<view class="item_tr">
							<view class="item_td">
								总订单量：{{ item.currentMonthAmount }} 单
							</view>
						</view>
						<view class="time_date">
							{{ item.addTime }}
						</view>
					</view>
				</view>
				<view class="record-bg" v-if="record">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png"></image>
				</view>
				<Loading :loaded="loaded" :loading="loading"></Loading>
			</view>
			<view class="footer">
				<view class="item" @click="home">
					<text class="iconfont icon-shouye"></text>
					<text class="title">首页</text>
				</view>
				<view class="item">
					<text class="iconfont icon-ziyuan-xianxing active"></text>
					<text class="title">运营中心</text>
				</view>
				<view class="item" @click="BackPage">
					<text class="iconfont icon-yonghu"></text>
					<text class="title">个人中心</text>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { getUserInfo, getOperateCommissionInfo4month, getOperateCommissionInfo4monthCity, getOperateCommissionInfo4monthArea } from '@/api/user'
	import Loading from "@/components/Loading";
	import { interval } from '@/utils'
	const NAME = 'operationCenter'
	export default {
		name: NAME,
		components: {
			Loading
		},
		props: {},
		data: function() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				filterBtnstartDate: currentDate,
				info: [],
				totalSum: 0,
				monthTotalSum: 0,
				areaId: '',
				where: {
					page: 1,
					limit: 10
				},
				loadTitle: "",
				loaded: false,
				loading: false,
				record: false
			}
		},
		onLoad: function() {
			this.areaId = this.userInfo.areaId
			if (this.userInfo.areaType == 0) {
				this.getIndex();
			} else if (this.userInfo.areaType == 1) {
				this.getCityInfo();
			} else {
				this.getAreaInfo();
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReachBottom() {
			if (this.userInfo.areaType == 0) {
				this.getIndex();
			} else if (this.userInfo.areaType == 1) {
				this.getCityInfo();
			} else {
				this.getAreaInfo();
			}
		},
		methods: {
			bindstartDate: function(e) {
				this.filterBtnstartDate = e.target.value
				this.$set(this, "info", []);
				this.where.page = 1;
				this.where.limit = 10;
				this.loaded = false;
				this.loading = false;
				this.record = false;
				if (this.userInfo.areaType == 0) {
					this.getIndex();
				} else if (this.userInfo.areaType == 1) {
					this.getCityInfo();
				} else {
					this.getAreaInfo();
				}
			},

			// 省级查询方法
			getIndex: function() {
				let that = this;
				if (that.loading) return; 
				if (that.loaded) return; 
				that.loading = true;
				getOperateCommissionInfo4month(that.where, that.filterBtnstartDate).then(
					res => {
						that.loading = false;
						let listLenth = 0;
						if (res.data.list == '') {
							if (that.info == '') {
								that.record = true
								that.monthTotalSum = 0
							} else {
								that.record = false
							}
						} else {
							that.where.page = that.where.page + 1;
							that.info.push.apply(that.info, res.data.list[0].list);
							listLenth = res.data.list[0].list.length
							if (res.data.list.length == 0) {
								that.record = true
							} else {
								that.record = false
							}
						}
						that.loaded = listLenth < that.where.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.totalSum = interval(res.data.totalSum);
						that.monthTotalSum = interval(res.data.monthTotalSum);

					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},

			// 市级查询方法
			getCityInfo() {
				let that = this;
				if (that.loading) return; 
				if (that.loaded) return; 
				that.loading = true;
				getOperateCommissionInfo4monthCity(that.where, that.filterBtnstartDate, that.areaId).then(
					res => {
						that.loading = false;
						let listLenth = 0;
						if (res.data.list == '') {
							if (that.info == '') {
								that.record = true
								that.monthTotalSum = 0
							} else {
								that.record = false
							}
						} else {
							that.info.push.apply(that.info, res.data.list[0].list);
							listLenth = res.data.list[0].list.length
							if (res.data.list.length == 0) {
								that.record = true
							} else {
								that.record = false
							}
						}
						that.loaded = listLenth < that.where.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.totalSum = interval(res.data.totalSum);
						that.monthTotalSum = interval(res.data.monthTotalSum);
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);

			},
			// 区级查询方法
			getAreaInfo() {
				let that = this;
				if (that.loading) return; 
				if (that.loaded) return; 
				that.loading = true;
				getOperateCommissionInfo4monthArea(that.where, that.filterBtnstartDate, that.areaId).then(
					res => {
						that.loading = false;
						let listLenth = 0;
						if (res.data.list == '') {
							if (that.info == '') {
								that.record = true
								that.monthTotalSum = 0
							} else {
								that.record = false
							}
						} else {
							that.where.page = that.where.page + 1;
							that.info.push.apply(that.info, res.data.list[0].list);
							listLenth = res.data.list[0].list.length
							if (res.data.list.length == 0) {
								that.record = true
							} else {
								that.record = false
							}
						}
						that.loaded = listLenth < that.where.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.totalSum = interval(res.data.totalSum);
						that.monthTotalSum = interval(res.data.monthTotalSum);
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
					month = month
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},
			BackPage() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				let a = this.$router.go(-1)
				if (a == undefined) {
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			home() {
				this.$yrouter.switchTab({
					path: "/pages/home/index"
				});
			},
			// 区级明细
			operationCenterdistrictlevel(areaId, filterBtnstartDate) {
				this.$yrouter.push({
					path: "/pages/user/operationCenter/DistrictLevel/index",
					query: {
						areaId: areaId,
						filterBtnstartDate: filterBtnstartDate
					},
				});
			},
			// 市级明细
			operationCenterDetail(areaId, filterBtnstartDate) {
				this.$yrouter.push({
					path: "/pages/user/operationCenter/detailDay/index",
					query: {
						areaId: areaId,
						filterBtnstartDate: filterBtnstartDate
					},
				});
			},
			operationCenterDayDetail(areaId, filterBtnstartDate) {
				this.$yrouter.push({
					path: "/pages/user/operationCenter/detail/index",
					query: {
						areaId: areaId,
						filterBtnstartDate: filterBtnstartDate
					},
				});
			},
		}	
	}
</script>
<style lang="less">
	.address {
		margin-top: 15rpx;
	}

	.font-color {
		text {
			color: #FFFFFF;
		}
	}

	.operationCenter .orderDataView .item .top_no::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		border-bottom: 2rpx solid #e8e8e8;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.operationCenter {
		.header {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 10;
			height: 500rpx;
			padding-top: 0rpx;
			background-image: url(https://h5.ylsp.vip/file/static/userTopBg.png);
			background-size: 100% 100%;

			.picTxt {
				margin-top: -190rpx;
				margin-left: 47rpx;
			}

			.vipNameView {
				position: absolute;
				top: 390rpx;
				left: 195rpx;
				color: #daad73;
				font-weight: bold;
			}
		}

		.wrapper {
			position: fixed;
			top: 200rpx;
			width: 100%;
			z-index: 100;
		}



		.orderDataView {
			width: 100%;
			height: auto;
			padding-top: 520rpx;
			padding-bottom: 150rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.record-bg {
				height: 300rpx;
				width: 100%;

				image {
					width: 400rpx;
					height: 400rpx;
					display: block;
					margin: 0 auto;
				}
			}

			.item {
				width: 100%;
				height: auto;
				overflow: hidden;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				.top_no {
					position: relative;
					height: 80rpx;
					width: 100%;
					line-height: 80rpx;
					padding-left: 30rpx;
					font-size: 28rpx;
					color: #333333;
					// border-bottom: #E8E8E8 solid 1rpx;
				}

				.content {
					height: 280rpx;
					width: 100%;
					position: relative;

					.item_tr {
						display: table;
						height: 70rpx;
						width: 100%;
						box-sizing: border-box;
						padding: 0 30rpx;

						.item_td {
							display: table-cell;
							height: 100%;
							vertical-align: middle;
							color: #333333;
							font-size: 28rpx;
						}

						.item_td:nth-child(1) {
							width: 65%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.item_td:nth-child(2) {
							width: 35%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.time_date {
						font-size: 40rpx;
						color: #000000;
						display: inline-block;
						position: absolute;
						right: 50rpx;
						top: 100rpx;
					}
				}
			}
		}


		.footer {
			height: 140rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			display: table;
			table-layout: fixed;

			.item {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				width: 33.3333333333333%;

				.iconfont {
					padding: 13rpx;
					border-radius: 100%;
					background-color: #222222;
					color: #FFFFFF;
				}

				.active {
					background-color: #daad73;
				}

				.title {
					display: block;
					text-align: center;
					font-size: 30rpx;
					margin-top: 15rpx;
				}

			}
		}


	}

	.operationCenter .footer::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		border-top: 2rpx solid #e8e8e8;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.footer-line-height {
		height: 1 * 100rpx;
	}

	.bg-color-reds {
		background-color: #fc5531;
	}

	.user .header:after {
		background-color: #fc5531;
	}

	.order-status-num {
		min-width: 0.33 * 100rpx;
		background-color: #fff;
		color: #eb3729;
		border-radius: 15px;
		position: absolute;
		right: -0.14 * 100rpx;
		top: -0.15 * 100rpx;
		font-size: 0.2 * 100rpx;
		padding: 0 0.08 * 100rpx;
		border: 1px solid #eb3729;
	}

	.pictrue {
		position: relative;
	}

	.switch-h5 {
		margin-left: 0.2 * 100rpx;
	}

	.binding {
		margin-top: 0.1 * 100rpx;
		display: inline-block;
		padding: 0.1 * 100rpx 0.3 * 100rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 50px;
		font-size: 0.22 * 100rpx;
		line-height: 1.5;
		border: 1rpx solid rgba(0, 0, 0, 0.7);
		color: #ffffff;
	}

	.by {
		text-align: center;
		padding: 30rpx 0;
	}

	.by-text {
		text-align: center;
		font-size: 24rpx;
	}

	.head_box {
		width: 750rpx;
		// background: #fff;
		transition: all linear 0.3s;

		/deep/.cuIcon-back {
			display: none;
		}

		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.head_box {
		position: fixed;
		top: 0;
		z-index: 100;
	}

	.nav-title {
		margin-left: 30rpx;
		line-height: 40px;
	}

	.acea-row .tab {
		width: 25%;
		padding: 30rpx 0;
		text-align: center;
	}

	.acea-row .tab .text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.acea-row .tab image {
		width: 70rpx;
		height: 70rpx;
	}

	.bg-color-blue {
		background-color: #8196e6;
	}

	.phoneMargin {
		margin-left: 20rpx;
	}
</style>
